import {LitElement, html, css} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('favorite-item-group')
export class FavoriteItemGroup extends LitElement {
  // 定义组件的属性
  @property({type: String}) title: string;

  // 定义组件的样式
  static styles = css`
      :host {
          display: block;
      }

      .group-box {
          display: flex;
          flex-direction: column;
          gap: 8px;
          width: 100%;
          padding-bottom: 4px;
      }

      .group-title {
          font-size: 20px;
          font-weight: bold;
      }

      .group-title::before {

      }

      .group-content {
          display: flex;
          flex-direction: row;
          gap: 12px;
          flex-wrap: wrap;
      }
  `;

  // 定义组件的渲染逻辑
  render() {
    return html`
      <div class="group-box">
        <div class="group-title">
          ${this.title}
        </div>
        <slot class="group-content"></slot>
      </div>
    `;
  }
}

// 确保组件在浏览器中注册
declare global {
  interface HTMLElementTagNameMap {
    'favorite-item-group': FavoriteItemGroup;
  }
}